<script setup>
import { ref, onMounted } from 'vue';
import { getRecord,exportRecord } from '@/api/Carbon.js';
import { ElMenu, ElMenuItem, ElCard } from 'element-plus';
import { useUserStore } from "@/stores/user";
import {formatDate} from "@/utils/format.js"
import request from "@/utils/request.js";

const store = useUserStore();
const userId = store.UserId; // 从 store 获取用户ID

const activeType = ref(0); // 当前选中的碳记录类型
const records = ref([]); // 存储获取到的碳记录

// 获取碳记录数据
const fetchRecords = async () => {
  try {
    const response = await getRecord(userId, activeType.value); // 只传递整数值
    if (response.data.code === 200) {
      records.value = response.data.data;
    }
  } catch (error) {
    console.error("获取碳记录失败:", error);
  }
};
const handleSelect = (index) => {
  activeType.value = parseInt(index);
  fetchRecords();
};

// 调用导出函数
const exportRecords = async () => {
  try {
    const response = await exportRecord(userId, store.UserName);
    // 创建 blob 对象
    const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const downloadUrl = window.URL.createObjectURL(blob);

    // 创建下载链接
    const link = document.createElement('a');
    link.href = downloadUrl;
    link.download = 'carbon_records.xlsx'; // 下载文件名
    document.body.appendChild(link);
    link.click();

    // 清理操作
    window.URL.revokeObjectURL(downloadUrl);
    document.body.removeChild(link);

    console.log("导出成功");
  } catch (error) {
    console.error("导出失败:", error);
  }
};




// 页面加载时和切换选项卡时获取数据
onMounted(() => {
  fetchRecords();
});
</script>

<template>
  <div class="carbon-records">
    <ElMenu :default-active="activeType.toString()" @select="handleSelect" mode="horizontal" class="custom-menu">
      <ElMenuItem index="0">电力</ElMenuItem>
      <ElMenuItem index="1">能源</ElMenuItem>
      <ElMenuItem index="2">交通工具</ElMenuItem>
      <ElMenuItem index="3">食物</ElMenuItem>
      <ElMenuItem index="4">废物</ElMenuItem>
      <ElMenuItem index="5">消费品</ElMenuItem>
      <ElMenuItem index="6">建筑材料</ElMenuItem>
      <ElMenuItem index="7">      <ElButton type="primary" @click="exportRecords">导出数据</ElButton>
      </ElMenuItem>
    </ElMenu>
    <div style="text-align: center; margin-top: 20px;">
    </div>

    <ElTable v-if="records.length > 0" :data="records" style="width: 100%" class="carbon-table">
      <ElTableColumn label="图标" width="80">
        <template #default="scope">
          <img :src="scope.row.icon" alt="icon" class="table-icon"/>
        </template>
      </ElTableColumn>
      <ElTableColumn prop="name" label="名称" />
      <ElTableColumn prop="value" label="数值" />
      <ElTableColumn prop="unit" label="单位" />
      <ElTableColumn prop="result" label="碳排放(kgCO2)" width="120" />
      <ElTableColumn  label="记录时间" width="150" >
        <template #default="scope">
          {{ formatDate(scope.row.createTime) }}
        </template>
      </ElTableColumn>

    </ElTable>
    <div style="text-align: center" v-else>
      暂无记录
    </div>
  </div>
</template>

<style scoped>
.custom-menu {
  border-bottom: none; /* 去掉默认的底部边框 */
  justify-content: center; /* 居中对齐 */
  padding: 10px 0;
  width: 180%;
  margin-left: -45%;
  margin-top: 30px;
}

.custom-menu .el-menu-item {
  font-size: 16px; /* 设置字体大小 */
  padding: 0 20px; /* 控制菜单项的内边距 */
  width:100px;
}

.carbon-table {
  margin-top: 20px;
  width: 150%;
  margin-left: -10%;
}
.carbon-table .table-icon {
  width: 30px;
  height: 30px;
}
</style>
